<script setup lang="ts">
import {message} from "ant-design-vue";
import {Dayjs} from "dayjs";
import DateRangeSelection from "~/contentScripts/views/wxt/components/DateRangeSelection.vue";
import {WxtBizCode, WxtUtils} from "~/contentScripts/views/wxt/lib/wxtUtils";
import PlacementArea from "~/contentScripts/views/wxt/SuperOptimization/KeywordPromotion/PlacementArea.vue";
import WxtModal from "~/contentScripts/views/wxt/wxt-modal.vue";
import {digitFormat} from "~/utils/util";

const title = '推广地域-省级优化';

const props = defineProps({
  type: {
    type: String,
    default: 'plan',
  },
  campaignIds: {
    type: Array,
    default: () => []
  },
  adgroupIds: {
    type: Array,
    default: () => undefined,
  },
  rows: {
    type: Array,
    default: () => []
  },
  bizCode: {
    type: String as PropType<WxtBizCode>,
    default: WxtBizCode.关键字推广,
  },
});
const emit = defineEmits([
  "refresh",
]);

const areaCode = ref<{
  id: number,
  name: string,
  provinceId: number,
  provinceName: number,
}[]>([]);
const getAreaCodeConfig = () => {
  WxtUtils.getAreaCodeConfig(props.bizCode).then((res: any) => {
    // console.log('res', res);
    areaCode.value = res;
  });
}
getAreaCodeConfig();
const plans = ref<any[]>([])
const effectEqual = ref<number>(15);
const dateRange = ref<Dayjs[]>([]);
const loading = ref<boolean>(false);
const unifyType = ref<string>('zhai')
watch(() => unifyType.value, (value) => {
    loadPlans();
})
watch(() => effectEqual.value, (value) => {
  loadPlans();
})
watch(() => dateRange.value, (value) => {
    loadPlans();
}, {
  deep: true
})
const loadPlans = () => {
  if (dateRange.value.length !== 2) {
    return;
  }
  if (loading.value) {
    return;
  }
  loading.value = true;
  plans.value = [];
  let campaignIds = props.campaignIds;
  // 从props.rows中获取campaignId并取唯一
  if (campaignIds.length === 0) {
    campaignIds = Array.from(new Set(props.rows.map((item: any) => item.campaignId)));
  }
  // const campaignIds = Array.from(new Set(props.rows.map((item: any) => item.campaignId)));
  campaignIds.forEach((campaignId: any, index: number) => {
    WxtUtils.customRequest('https://one.alimama.com/campaign/get.json', props.bizCode, {
      campaignId: campaignId,
    }).then(res => {
      plans.value.push(res.data.data.campaign);
      if (plans.value.length === campaignIds.length) {
        nextTick(() => {
          plans.value.forEach((plan: any, i: number) => {
            WxtUtils.customRequest('https://one.alimama.com/report/query.json', WxtBizCode.universalBP, {
              byPage: true,
              effectEqual: effectEqual.value,
              endTime: dateRange.value[1].format('YYYY-MM-DD'),
              fromRealTime: false,
              offset: 0,
              pageSize: 100,
              queryDomains: ['province'],
              queryFieldIn: [
                "adPv",
                "click",
                "charge",
                "ctr",
                "ecpc",
                "ecpm",
                "gmvInshopNum",
                "gmvInshopAmt",
                "prepayInshopAmt",
                "prepayInshopNum",
                "prepayDirAmt",
                "prepayDirNum",
                "prepayIndirAmt",
                "prepayIndirNum",
                "alipayDirAmt",
                "alipayIndirAmt",
                "alipayInshopAmt",
                "alipayInshopNum",
                "alipayDirNum",
                "alipayIndirNum",
                "cvr",
                "roi",
                "dirRoi",
                "alipayInshopCost",
                "cartInshopNum",
                "cartDirNum",
                "cartIndirNum",
                "cartRate",
                "itemColInshopNum",
                "shopColDirNum",
                "shopColInshopCost",
                "colCartNum",
                "colCartCost",
                "itemColCart",
                "itemColCartCost",
                "colNum",
                "itemColInshopCost",
                "itemColInshopRate",
                "cartCost",
                "itemColDirNum",
                "itemColIndirNum",
                "couponShopNum",
                "shoppingNum",
                "shoppingAmt",
                "wwNum",
                "wwNumCost"
              ],
              rptType: 'area',
              source: 'baseReport',
              splitType: 'day',
              startTime: dateRange.value[0].format('YYYY-MM-DD'),
              strategyCampaignIdIn: [plan.campaignId],
              totalTag: true,
              unifyType: unifyType.value,
            }).then(res => {
              plan.areaData = res.data.data.list;
              if (!plans.value.find((p: any) => typeof p.areaData === "undefined")) {
                nextTick(() => {
                  calcDataSource();
                })
              }
            });
          })
        })
      }
    })
  })
}
const dataSource = ref<any[]>([]);
const calcDataSource = () => {
  dataSource.value = [];
  plans.value.forEach((plan: any, index: number) => {
    console.log('plan', plan);
    plan.areaData.forEach((area: any) => {
      // 间接ROI
      area.indirRoi = area.roi - area.dirRoi;
      // 直接转化率
      area.dirCvr = area.alipayDirNum / area.click;
      // 间接转化率
      area.indirCvr = area.alipayIndirNum / area.click;

      // 直接加购率
      area.dirAddRate = area.cartDirNum / area.click;
      // 间接加购率
      area.indirAddRate = area.cartIndirNum / area.click;

      // 直接收藏率
      area.dirFavRate = area.itemColDirNum / area.click;
      // 间接收藏率
      area.indirFavRate = area.itemColIndirNum / area.click;
      //  直接收藏加购率
      area.dirFavAddRate = area.dirFavRate + area.dirAddRate;
      // 间接收藏加购率
      area.indirFavRate = area.indirFavRate + area.indirAddRate;
      // 从areaCode中找到对应的省份
      const province = areaCode.value.find((a: any) => a.provinceId === area.provinceId);
      // plan.launchAreaStrList = plan.launchAreaStrList.map((id: string) => id === '575' ? '574' : id);
      dataSource.value.push({
        campaignId: plan.campaignId,
        campaignName: plan.campaignName,
        ...area,
        status: plan.launchAreaStrList.includes((province?.provinceId || '') + ""),
        provinceName: province?.provinceName,
        launchAreaStrList: plan.launchAreaStrList,
        id: plan.campaignId + '-' + area.provinceId,
      });
    });
  })
  loading.value = false;
}
// const handle = () => {
//   if (props.rows.length === 0) {
//     message.error('请选择需要批量处理的数据！');
//     return;
//   }
//   loadPlans();
//   visible.value = true;
// }

onMounted(() => {
  loadPlans();
})
watch(() => props.rows, (value) => {
  if (value.length) {
    loadPlans();
  }
})
watch(() => props.campaignIds, (value) => {
  if (value.length) {
    loadPlans();
  }
})
const columns = [
  {
    title: '状态',
    dataIndex: 'status',
    width: 100,
    dataType: 'custom',
    slot: 'status',
    render: (text: any, record: any, index: number) => {
      return text ? '已投放' : '未投放';
    },
    fixed: 'left',
    sorter: (a: any, b: any) => a.status - b.status,
  },
  {
    title: '省份',
    dataIndex: 'provinceName',
    width: 100,
    fixed: 'left',
    sorter: (a: any, b: any) => a.provinceName.localeCompare(b.provinceName),
  },
  {
    title: '所属计划',
    dataIndex: 'campaignName',
    width: 160,
    fixed: 'left',
  },

  {
    title: '展现量',
    dataIndex: 'reportInfoList.adPv',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.adPv || 0;
        // 每隔三位逗号分隔
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].adPv || 0) - (b.reportInfoList[0].adPv || 0);
    },
  },
  {
    title: '点击量',
    dataIndex: 'reportInfoList.click',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.click || 0;
        // 每隔三位逗号分隔
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].click || 0) - (b.reportInfoList[0].click || 0);
    },
  },
  {
    title: '花费',
    dataIndex: 'reportInfoList.charge',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.charge || 0;
        // 每隔三位逗号分隔
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].charge || 0) - (b.reportInfoList[0].charge || 0);
    },
  },
  {
    title: '点击率',
    dataIndex: 'reportInfoList.ctr',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.ctr || 0;
        return (value * 100).toFixed(2) + '%';
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].ctr || 0) - (b.reportInfoList[0].ctr || 0);
    },
  },
  {
    title: '平均点击花费',
    dataIndex: 'reportInfoList.ecpc',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.ecpc || 0;
        return digitFormat((value).toFixed(2));
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].ecpc || 0) - (b.reportInfoList[0].ecpc || 0);
    },
  },
  {
    title: '千次展现花费',
    dataIndex: 'reportInfoList.ecpm',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.ecpm || 0;
        return digitFormat((value).toFixed(2));
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].ecpm || 0) - (b.reportInfoList[0].ecpm || 0);
    },
  },
  {
    title: '拍下订单笔数',
    dataIndex: 'reportInfoList.gmvInshopNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.gmvInshopNum || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].gmvInshopNum || 0) - (b.reportInfoList[0].gmvInshopNum || 0);
    },
  },
  {
    title: '拍下订单金额',
    dataIndex: 'reportInfoList.gmvInshopAmt',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.gmvInshopAmt || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].gmvInshopAmt || 0) - (b.reportInfoList[0].gmvInshopAmt || 0);
    },
  },
  {
    title: '预售成交笔数',
    dataIndex: 'reportInfoList.prepayInshopNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.prepayInshopNum || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].prepayInshopNum || 0) - (b.reportInfoList[0].prepayInshopNum || 0);
    },
  },
  {
    title: '预售成交金额',
    dataIndex: 'reportInfoList.prepayInshopAmt',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.prepayInshopAmt || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].prepayInshopAmt || 0) - (b.reportInfoList[0].prepayInshopAmt || 0);
    },
  },
  {
    title: '预售成交金额',
    dataIndex: 'reportInfoList.prepayIndirAmt',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.prepayDirAmt || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].prepayDirAmt || 0) - (b.reportInfoList[0].prepayDirAmt || 0);
    },
  },
  {
    title: '预售间接成交笔数',
    dataIndex: 'reportInfoList.prepayIndirNum',
    width: 140,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.prepayIndirNum || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].prepayIndirNum || 0) - (b.reportInfoList[0].prepayIndirNum || 0);
    },
  },
  {
    title: '预售间接成交金额',
    dataIndex: 'reportInfoList.prepayDirAmt',
    width: 140,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.prepayIndirAmt || 0;
        return digitFormat(value.toFixed(2));
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].prepayIndirAmt || 0) - (b.reportInfoList[0].prepayIndirAmt || 0);
    },
  },
  {
    title: '总成交笔数',
    dataIndex: 'reportInfoList.alipayInshopNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.alipayInshopNum || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].alipayInshopNum || 0) - (b.reportInfoList[0].alipayInshopNum || 0);
    },
  },
  {
    title: '总成交金额',
    dataIndex: 'reportInfoList.alipayInshopAmt',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.alipayInshopAmt || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].alipayInshopAmt || 0) - (b.reportInfoList[0].alipayInshopAmt || 0);
    },
  },
  {
    title: '直接成交笔数',
    dataIndex: 'reportInfoList.alipayDirNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.alipayDirNum || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].alipayDirNum || 0) - (b.reportInfoList[0].alipayDirNum || 0);
    },
  },
  {
    title: '直接成交金额',
    dataIndex: 'reportInfoList.alipayDirAmt',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.alipayDirAmt || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].alipayDirAmt || 0) - (b.reportInfoList[0].alipayDirAmt || 0);
    },
  },
  {
    title: '间接成交笔数',
    dataIndex: 'reportInfoList.alipayIndirNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.alipayIndirNum || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].alipayIndirNum || 0) - (b.reportInfoList[0].alipayIndirNum || 0);
    },
  },
  {
    title: '间接成交金额',
    dataIndex: 'reportInfoList.alipayIndirAmt',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.alipayIndirAmt || 0;
        return digitFormat(value.toFixed(2));
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].alipayIndirAmt || 0) - (b.reportInfoList[0].alipayIndirAmt || 0);
    },
  },
  {
    title: '点击转化率',
    dataIndex: 'reportInfoList.cvr',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.cvr || 0;
        return (value * 100).toFixed(2) + '%';
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].cvr || 0) - (b.reportInfoList[0].cvr || 0);
    },
  },
  {
    title: '投入产出比',
    dataIndex: 'reportInfoList.roi',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.roi || 0;
        return (value).toFixed(2);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].roi || 0) - (b.reportInfoList[0].roi || 0);
    },
  },
  {
    title: '直接成交RIO',
    dataIndex: 'reportInfoList.dirRoi',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.dirRoi || 0;
        return (value).toFixed(2);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].dirRoi || 0) - (b.reportInfoList[0].dirRoi || 0);
    },
  },
  {
    title: '总成交成本',
    dataIndex: 'reportInfoList.alipayInshopCost',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.alipayInshopCost || 0;
        return (value).toFixed(2);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].alipayInshopCost || 0) - (b.reportInfoList[0].alipayInshopCost || 0);
    },
  },
  {
    title: '总购物车数',
    dataIndex: 'reportInfoList.cartInshopNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.cartInshopNum || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].cartInshopNum || 0) - (b.reportInfoList[0].cartInshopNum || 0);
    },
  },
  {
    title: '直接购物车数',
    dataIndex: 'reportInfoList.cartDirNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.cartDirNum || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].cartDirNum || 0) - (b.reportInfoList[0].cartDirNum || 0);
    },
  },
  {
    title: '间接购物车数',
    dataIndex: 'reportInfoList.cartIndirNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.cartIndirNum || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].cartIndirNum || 0) - (b.reportInfoList[0].cartIndirNum || 0);
    },
  },
  {
    title: '加购率',
    dataIndex: 'reportInfoList.cartRate',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.cartRate || 0;
        return (value * 100).toFixed(2) + '%';
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].cartRate || 0) - (b.reportInfoList[0].cartRate || 0);
    },
  },
  {
    title: '收藏宝贝数',
    dataIndex: 'reportInfoList.itemColInshopNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.itemColInshopNum || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].itemColInshopNum || 0) - (b.reportInfoList[0].itemColInshopNum || 0);
    },
  },
  {
    title: '收藏店铺数',
    dataIndex: 'reportInfoList.shopColDirNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.shopColDirNum || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].shopColDirNum || 0) - (b.reportInfoList[0].shopColDirNum || 0);
    },
  },
  {
    title: '店铺收藏成本',
    dataIndex: 'reportInfoList.shopColInshopCost',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.shopColInshopCost || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].shopColInshopCost || 0) - (b.reportInfoList[0].shopColInshopCost || 0);
    },
  },
  {
    title: '总收藏加购数',
    dataIndex: 'reportInfoList.colCartNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.colCartNum || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].colCartNum || 0) - (b.reportInfoList[0].colCartNum || 0);
    },
  },
  {
    title: '总收藏加购成本',
    dataIndex: 'reportInfoList.colCartCost',
    width: 120,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.colCartCost || 0;
        return digitFormat(value.toFixed(2));
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].colCartCost || 0) - (b.reportInfoList[0].colCartCost || 0);
    },
  },
  {
    title: '宝贝收藏加购数',
    dataIndex: 'reportInfoList.itemColCart',
    width: 120,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.itemColCart || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].itemColCart || 0) - (b.reportInfoList[0].itemColCart || 0);
    },
  },
  {
    title: '宝贝收藏加购成本',
    dataIndex: 'reportInfoList.itemColCartCost',
    width: 140,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.itemColCartCost || 0;
        return digitFormat(value.toFixed(2));
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].itemColCartCost || 0) - (b.reportInfoList[0].itemColCartCost || 0);
    },
  },
  {
    title: '总收藏数',
    dataIndex: 'reportInfoList.colNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.colNum || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].colNum || 0) - (b.reportInfoList[0].colNum || 0);
    },
  },
  {
    title: '宝贝收藏成本',
    dataIndex: 'reportInfoList.itemColInshopCost',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.itemColInshopCost || 0;
        return digitFormat(value.toFixed(2));
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].itemColInshopCost || 0) - (b.reportInfoList[0].itemColInshopCost || 0);
    },
  },
  {
    title: '宝贝收藏率',
    dataIndex: 'reportInfoList.itemColInshopRate',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.itemColInshopRate || 0;
        return (value * 100).toFixed(2) + '%';
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].itemColInshopRate || 0) - (b.reportInfoList[0].itemColInshopRate || 0);
    },
  },
  {
    title: '加购成本',
    dataIndex: 'reportInfoList.cartCost',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.cartCost || 0;
        return digitFormat(value.toFixed(2));
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].cartCost || 0) - (b.reportInfoList[0].cartCost || 0);
    },
  },
  {
    title: '直接收藏宝贝数',
    dataIndex: 'reportInfoList.itemColDirNum',
    width: 120,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.itemColDirNum || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].itemColDirNum || 0) - (b.reportInfoList[0].itemColDirNum || 0);
    },
  },
  {
    title: '间接收藏宝贝数',
    dataIndex: 'reportInfoList.itemColIndirNum',
    width: 120,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.itemColIndirNum || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].itemColIndirNum || 0) - (b.reportInfoList[0].itemColIndirNum || 0);
    },
  },
  {
    title: '优惠劵领取量',
    dataIndex: 'reportInfoList.couponShopNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.couponShopNum || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].couponShopNum || 0) - (b.reportInfoList[0].couponShopNum || 0);
    },
  },
  {
    title: '购物金充值笔数',
    dataIndex: 'reportInfoList.shoppingNum',
    width: 120,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.shoppingNum || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].shoppingNum || 0) - (b.reportInfoList[0].shoppingNum || 0);
    },
  },
  {
    title: '购物金充值金额',
    dataIndex: 'reportInfoList.shoppingAmt',
    width: 120,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.shoppingAmt || 0;
        return digitFormat(value.toFixed(2));
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].shoppingAmt || 0) - (b.reportInfoList[0].shoppingAmt || 0);
    },
  },
  {
    title: '旺旺咨询量',
    dataIndex: 'reportInfoList.wwNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.wwNum || 0;
        return digitFormat(value);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].wwNum || 0) - (b.reportInfoList[0].wwNum || 0);
    },
  },
  {
    title: '间接成交ROI',
    dataIndex: 'reportInfoList.indirRoi',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.indirRoi || 0;
        return value.toFixed(2);
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].indirRoi || 0) - (b.reportInfoList[0].indirRoi || 0);
    },
  },
  {
    title: '直接转化率',
    dataIndex: 'reportInfoList.dirCvr',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.dirCvr || 0;
        return (value * 100).toFixed(2) + '%';
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].dirCvr || 0) - (b.reportInfoList[0].dirCvr || 0);
    },
  },
  {
    title: '间接转化率',
    dataIndex: 'reportInfoList.indirCvr',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.indirCvr || 0;
        return (value * 100).toFixed(2) + '%';
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].indirCvr || 0) - (b.reportInfoList[0].indirCvr || 0);
    },
  },
  {
    title: '直接收藏加购率',
    dataIndex: 'reportInfoList.dirFavAddRate',
    width: 120,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.dirFavAddRate || 0;
        return (value * 100).toFixed(2) + '%';
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].dirFavAddRate || 0) - (b.reportInfoList[0].dirFavAddRate || 0);
    },
  },
  {
    title: '间接收藏加购率',
    dataIndex: 'reportInfoList.indirFavRate',
    width: 120,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record) {
        return '-';
      } else {
        const value = record.indirFavRate || 0;
        return (value * 100).toFixed(2) + '%';
      }
    },
    sorter: (a: any, b: any) => {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].indirFavRate || 0) - (b.reportInfoList[0].indirFavRate || 0);
    },
  },
];
const visible = ref<boolean>(false);
const handleSwitch = (rows: any[]) => {
  let campaignList: any = [];
  rows.map((plan: any) => {
    if (plan) {
      if (!plan.status) {
        plan.launchAreaStrList.push((plan?.provinceId || '') + "");
      } else {
        plan.launchAreaStrList = plan.launchAreaStrList.filter((id: string) => ["574", "575"].includes(plan.provinceId + "") ? !["574", "575"].includes(id + '') : id !== (plan?.provinceId || '') + "");
      }
      campaignList.push({
        campaignId: plan.campaignId,
        launchAreaStrList: plan.launchAreaStrList,
      })
    }
    const index = dataSource.value.findIndex((item: any) => item.campaignId === plan.campaignId && item.provinceId === plan.provinceId);
    dataSource.value[index].status = !dataSource.value[index].status;
  })
  WxtUtils.advancedBatchUpdate(campaignList, props.bizCode).then(res => {
    message.success('操作成功！');
    loadPlans();
  })
}
const selectedRows = ref<any[]>([]);
const BatchModifyStatus = (e: any) => {
  const status = e.key === 1;
  if (!selectedRows.value.length) {
    message.error('请选择需要批量处理的数据！');
    return;
  }
  // 从selectedRows中找到所有的campaignId 并且去重
  const campaignIds = selectedRows.value.map((row: any) => row.campaignId);
  const uniqueCampaignIds = Array.from(new Set(campaignIds));
  const campaignList: any[] = [];
  uniqueCampaignIds.forEach((campaignId: any) => {
    // 获取到所有campaignId相同的行下的provinceId
    const provinceIds = selectedRows.value.filter((row: any) => row.campaignId === campaignId).map((row: any) => row.provinceId);
    const plan = plans.value.find((plan: any) => plan.campaignId === campaignId);
    let launchAreaStrList = plan.launchAreaStrList;
    provinceIds.forEach((provinceId: any) => {
      if (!status) {
        console.log('暂停', provinceId)
        if (launchAreaStrList.includes((provinceId + '' || '') + "")) {
          console.log('移除', provinceId, launchAreaStrList)
          // 从中移除此省份
          launchAreaStrList = launchAreaStrList.filter((id: string) => ["574", "575"].includes(provinceId + "") ? !["574", "575"].includes(id + '') : id !== (provinceId || '') + "");
        }
      } else {
        if (!launchAreaStrList.includes((provinceId + '' || '') + "")) {
          launchAreaStrList.push((provinceId || '') + "");
        }
      }
    })
    campaignList.push({
      campaignId: campaignId,
      launchAreaStrList: launchAreaStrList,
    })
  })
  WxtUtils.advancedBatchUpdate(campaignList, props.bizCode).then(res => {
    message.success('操作成功！');
    loadPlans();
  })
}
</script>

<template>
  <a-row style="padding-bottom: 10px;">
    <a-col>
      <a-space>
        <a-select v-model:value="unifyType" size="small" style="width: 160px;">
          <a-select-option value="zhai">末位点击归因</a-select-option>
          <a-select-option value="mta">MTA归因</a-select-option>
        </a-select>
        <a-select v-model:value="effectEqual" size="small" style="width: 160px;">
          <a-select-option :value="1">1天累计数据</a-select-option>
          <a-select-option :value="3">3天累计数据</a-select-option>
          <a-select-option :value="7">7天累计数据</a-select-option>
          <a-select-option :value="15">15天累计数据</a-select-option>
          <a-select-option :value="30">30天累计数据</a-select-option>
        </a-select>
        <date-range-selection v-model:value="dateRange" :has-today="false"/>
        <PlacementArea :rows="plans" @refresh="loadPlans" :biz-code="bizCode"/>
        <a-dropdown>
          <template #overlay>
            <a-menu @click="BatchModifyStatus">
              <a-menu-item :key="1">
                正在推广
              </a-menu-item>
              <a-menu-item :key="0">
                暂停推广
              </a-menu-item>
            </a-menu>
          </template>
          <a-button size="small" type="primary">
            推广状态
          </a-button>
        </a-dropdown>
      </a-space>
    </a-col>
  </a-row>
  <div style="height:calc(100vh - 140px);">
    <base-table
        :columns="columns"
        :dataSource="dataSource"
        :loading="loading"
        table-name="推广地域-省级优化"
        selection
        v-model:selected-rows="selectedRows"
        row-key="id"
    >
      <template #status="row">
        <a-switch :checked="row.status" @change="handleSwitch([row])"/>
      </template>
    </base-table>
  </div>
</template>

<style scoped>

</style>
